$(function() {
    // 0. 获取地址栏的id，并根据 id 查询到文章内容，显示到页面中

    //  new URLSearchParams 创建URLSearchParams获取地址栏上面的参数对象
    let searchObj = new URLSearchParams(window.location.search);

    searchObj.forEach(function(item) {
        console.log(item);
    })
    let id = searchObj.get('id')

    // 0.2.1 并根据 id 查询到文章内容
    function getArticle() {
        $.ajax({
            type: 'get',
            url: '/admin/article/search',
            data: { id },
            success: (backData) => {
                console.log(backData);
                let { title, cover, categoryId, date, content } = backData.data;
                // console.log(title);
                $('#inputTitle').val(title);
                // 🧨注意：这里是替换图片地址
                $('.article_cover').attr('src', cover);
                // 🧨 注意：用 val 设置下拉框的值
                $('.category').val(categoryId);
                $('#date').val(date);
                $('#content').val(content);
            },
        })
    }

    // 业务1. 初始化日期选择框
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date' //指定元素
        });
    });

    // 2. 初始化富文本编辑器
    tinymce.init({
        selector: '#content', // 匹配页面中的 textarea 选择器
        language: 'zh_CN', // 显示中文界面,注意大小写
    });

    $.ajax({
        type: 'get',
        url: '/admin/category/list',
        data: {},
        success: (backData) => {
            console.log(backData)
            let categoryRes = template('categoryTemp', backData);
            $('.category').html(categoryRes);
            // 🧨0.2.2 注意：获取到类别后，才获取文章的详情
            getArticle();
        },
    });

    // 业务4. 发表文章 - 易错点
    $('.btn-release,.btn-draft').on('click', function(e) {
        e.preventDefault();
        // 根据表单DOM元素初始化FormData对象，自动获取带 name 的表单元素的值
        let fd = new FormData(document.querySelector('#form'));
        // 把获取到的文章内容添加到 FormData 对象中
        let content = tinyMCE.editors['content'].getContent();
        fd.append('content', content);
        fd.append('id', id)
            // 判断用户点击的到底是发布按钮，还是草稿按钮
        if ($(this).text() === '修改') {
            fd.append('state', '已发布')
        } else {
            fd.append('state', '')
        };
        //    // 添加后，打印检查获取的参数结构
        // fd.forEach(function(item, index) {
        //     console.log(item);
        // })
        $.ajax({
            type: 'post',
            url: '/admin/article/edit',
            data: fd,
            // FormData 提交需要添加 cp 配置
            contentType: false,
            processData: false,
            success: (backData) => {
                console.log(backData)
                if (backData.code == 200) {
                    layer.msg(backData.msg);
                    setTimeout(() => {
                        window.location.href = './article_list.html'
                    }, 1000);
                } else {
                    layer.msg(backData.msg);
                }

            },
        })
    });
    // 业务5. 文章封面照片选择后显示，change 文件改变时触发
    $('#inputCover').on('change', function() {
        // 5.1 获取选择的文件对象
        let file = this.files[0];
        // 5.2 根据文件对象创建URL路径
        let url = URL.createObjectURL(file);
        // 5.3 把路径更新到 img 中实现预览
        $('.article_cover').attr('src', url)
    })

})